/*
 * @Description: 红包英雄榜视图
 * @Author: kanglin
 * @Date: 2018-07-19 08:52:21
 * @Copyright: Created by Panxsoft.
 */
<style lang="less" scoped rel="stylesheet/less" type="text/less" >
	// @import '~src/assets/css/common.less';
	@pad-radio: 10rem/1536;
	.v-lucky-money{
		background-image: url('//gz.bcebos.com/v1/beauty-mirror/wx_system/lucky-money/bg2.png');
		background-size: 100%;
		background-repeat: no-repeat;
		background-image: linear-gradient(90deg, #6f11b3, #88189f);
		top: 0;
		bottom: 0;
		width: 100%;
		position: static;
		.pictue {
			// width: 100%;
			font-size: 0;
			&>img{
				width: 100%;
			}
			position: relative;
		}
		.title{
			font-size: 30 * @pad-radio;
			color: #ed4337;
			text-align: center;
			position: absolute;
			width: 100%;
			top: 88%;
		}
		.rankings{
			margin: 0 auto;
			background: #9d091c;
			width: 1410* @pad-radio;
		}

		.desc{
			font-size: 30 * @pad-radio;
			position: absolute;
			width: 80 * @pad-radio;
			top: 85%;
			right: 11.5%;
			color: #ffffff;
		}
		.header{
			height: 100 * @pad-radio;
			line-height: 100 * @pad-radio;
			color: #ffffff;
			font-size: 40 * @pad-radio;
			text-align: center;
			position: absolute;
			top: 0;
			width: 100%;
		}
	}
</style>
<template>
	<div class="v-lucky-money">
		<!-- <back/> -->
		<div
			ref="picture"
			class="pictue">
			<img
				src="//gz.bcebos.com/v1/beauty-mirror/wx_system/lucky-money/bg1_home.png"
				alt=""
				@load="handleImageLoaded">
			<p class="title">
				当前红包榜单排名
			</p>
			<span
				class="desc"
				@click="showModal()">
				活动说明
			</span>
			<!-- <div class="header">红包记录</div> -->
		</div>
		<div
			:style="{minHeight: rankingsMinHeight +'px' }"
			class="rankings">
			<rankings :data="bonus_rankings"/>
		</div>

		<Modal :visible.sync="is_modal_visible"/>
	</div>
</template>

<script>
import { parseQueryString } from 'src/utils/helper';
import API_LIST from 'src/API_LIST';
import rankings from './rankings';
import Modal from './modal';
import back from '../back';

export default {
	name: 'LuckMoney',
	components: {
		rankings,
		Modal,
		back,
	},
	data() {
		return {
			bonus_rankings: [],
			params: {
				// token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC9taXJyb3IubWVcL2FwaVwvYXBwXC9kZXZpY2UtYWNjb3VudFwvbG9naW4iLCJpYXQiOjE1MzE5Njk4ODYsImV4cCI6MTUzMjU3NDY4NiwibmJmIjoxNTMxOTY5ODg2LCJqdGkiOiI2UGQyakxXb0F6T0doeWFPIiwic3ViIjo0LCJwcnYiOiI3M2M0MTc0YWM3ZDMxYmYxY2IwOTViODljNmU5MzU5NzI5ZWUwNmEzIn0.NdrWnEs3U_Jn5wyh__i5XkSyzZ8KSeA8AzJ89xhtLDs',
				store_id: null,
			},
			rankingsMinHeight: 0,
			is_modal_visible: false,
		};
	},
	mounted() {
		this.params.store_id = this.revolveStoreId();
		if (this.params.store_id) {
			this.fetchBonusRankings(this.params);
		} else {
			const toast = this.$createToast({
				type: 'warn',
				time: 2000,
				txt: '参数错误!',
			});
			toast.show();
		}
	},
	methods: {

		/**
		 *  计算列表高度
		 *  @return {number} minHeight
		 */
		calculateRankingsMinHeight() {
			const ch = document.body.clientHeight;
			const { height } = this.$refs.picture.getBoundingClientRect();
			return ch - height;
		},

		/**
		 * 处理图片加载完成
		 * @return {undefined}
		 */
		handleImageLoaded() {
			this.rankingsMinHeight = this.calculateRankingsMinHeight();
		},

		/**
		 * 解析店铺 id
		 * @return {String} store_id {店员id}
		 */
		revolveStoreId() {
			const { store_id }	= parseQueryString();
			return store_id;
		},

		/**
		 * 显示弹框
		 * @return {undefined}
		 */
		showModal() {
			this.is_modal_visible = true;
		},

		/**
         * 请求英雄榜数据
		 * @param {Object} params {参数对象}
		 * @return {undefined}
         */
		fetchBonusRankings(params) {
			this.$http.get(API_LIST.BONUS, { params })
				.then(({ data }) => {
					if (data.code !== 0) {
						throw new Error(data.error);
					} else {
						this.bonus_rankings = data.bonus_rankings;
					}
				})
				.catch((error) => {
					const toast = this.$createToast({
						type: 'warn',
						time: 2000,
						txt: error.message,
					});
					toast.show();
				});
		},
	},
};
</script>
